revision:
Click on the buttons below to change the language of the webpage.
Welcome to the this webpage. Default language is English. But you can choose any language using the buttons above!
<div>
<button onclick="changeLanguage('eng')">Change to English</button>
<button onclick="changeLanguage('es')">Change to Spanish</button>
<button onclick="changeLanguage('ndl')">Change to Dutch </button>
<p id="content"> Welcome to the this webpage. Default language is English. But you can choose any
language using the buttons above! </p>
</div>
<script>
function changeLanguage(lang) {
location.hash = lang;
location.reload();
}
// Define the language reload anchors
var language = {
eng: {
welcome: "Welcome to this webpage!" + " Default language is English " +
" But you can chose any language using the buttons above!"
},
es: {
welcome: "¡Bienvenido al portal! " +
"¡Puedes elegir cualquier idioma usando " +
"los botones de arriba!"
},
ndl: {
welcome: "Welkom op deze website!" +
" U kunt om het even welke taal kiezen" +
" door gebruik te maken van de knoppen hierboven!"
}
};
// Check if a hash value exists in the URL
if (window.location.hash) {
// Set the content of the webpage depending on the hash value
if (window.location.hash == "#es") {
content.textContent = language.es.welcome;
}
else if (window.location.hash == "#ndl") {
content.textContent = language.ndl.welcome;
}
}
</script>
Click the respective buttons to make the texts disappear and reappear (= toggle)
<div>
<button onclick="Nederlands()">Nederlands</button>
<button onclick="English()">English</button>
<button onclick="Chinese()">Chinese</button>
<div id="nederlands" style="display:block;">Dit is een tekst in het Nederlands.</div>
<div id="english" style="display:block;">This is a text in English.</div>
<div id="chinese" style="display:block;">这是中文文本.</div>
</div>
<script>
function Nederlands() {
let nl = document.getElementById("nederlands");
nl.style.display == "block" ? nl.style.display = "none" :
nl.style.display = "block";
}
function English() {
let en = document.getElementById("english");
en.style.display == "block" ? en.style.display = "none" :
en.style.display = "block";
}
function Chinese() {
let cn = document.getElementById("chinese");
cn.style.display == "block" ? cn.style.display = "none" :
cn.style.display = "block";
}
</script>
Click the respective buttons to make the texts disappear and reappear (= toggle)
<div class="spec">
<button onclick="Nederlands1()">Nederlands</button>
<button onclick="English1()">English</button>
<button onclick="Chinese1()">Chinese</button>
<div class="nederlands" style="display:block;">Dit is een tekst in het Nederlands.</div>
<div class="english" style="display:block;">This is a text in English.</div>
<div class="chinese" style="display:block;">这是中文文本.</div>
</div>
<script>
function Nederlands1() {
let nl = document.getElementsByClassName("nederlands")[0];
nl.style.display == "block" ? nl.style.display = "none" :
nl.style.display = "block";
}
function English1() {
let en = document.getElementsByClassName("english")[0];
en.style.display == "block" ? en.style.display = "none" :
en.style.display = "block";
}
function Chinese1() {
let cn = document.getElementsByClassName("chinese")[0];
cn.style.display == "block" ? cn.style.display = "none" :
cn.style.display = "block";
}
</script>
Click the respective buttons to make the texts disappear and reappear (= toggle)
<div>
<button onclick="Nederlands2()">Nederlands</button>
<button onclick="English2()">English</button>
<button onclick="Chinese2()">Chinese</button>
<div class="nederlands2" style="display:block;">Dit is een tekst in het Nederlands.</div>
<div class="english2" style="display:block;">This is a text in English.</div>
<div class="chinese2" style="display:block;">这是中文文本.</div>
<div class="nederlands2" style="display:block;">Dit is een tweede tekst in het Nederlands.</div>
<div class="english2" style="display:block;">This is a second text in English.</div>
<div class="chinese2" style="display:block;">这是第二篇中文课文.</div>
<div class="nederlands2" style="display:block;">Dit is een derde tekst in het Nederlands.</div>
<div class="english2" style="display:block;">This is a third text in English.</div>
<div class="chinese2" style="display:block;">这是第三篇中文课文.</div>
</div>
<script>
function Nederlands2() {
let nl = document.getElementsByClassName("nederlands2");
nl[0].style.display == "block" ? nl[0].style.display = "none" : nl[0].style.display = "block";
nl[1].style.display == "block" ? nl[1].style.display = "none" : nl[1].style.display = "block";
nl[2].style.display == "block" ? nl[2].style.display = "none" : nl[2].style.display = "block";
// nl[3].style.color = "red";
}
function English2() {
let en = document.getElementsByClassName("english2");
en[0].style.display == "block" ? en[0].style.display = "none" : en[0].style.display = "block";
en[1].style.display == "block" ? en[1].style.display = "none" : en[1].style.display = "block";
en[2].style.display == "block" ? en[2].style.display = "none" : en[2].style.display = "block";
// en[3].style.color = "yellow";
}
function Chinese2() {
let cn = document.getElementsByClassName("chinese2");
cn[0].style.display == "block" ? cn[0].style.display = "none" : cn[0].style.display = "block";
cn[1].style.display == "block" ? cn[1].style.display = "none" : cn[1].style.display = "block";
cn[2].style.display == "block" ? cn[2].style.display = "none" : cn[2].style.display = "block";
// cn[3].style.color = "black";
}
</script>